<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>消息管理</title>
    <style>
        #app {
            padding: 20px;
        }

        .notification-wrapper {
            position: relative;
            display: inline-block;
            margin: 30px;
        }

        .icon {
            font-size: 32px;
            padding: 10px;
            cursor: pointer;
        }

        .notification-badge {
            position: absolute;
            top: 5px;
            right: 5px;
            background-color: #ff5252;
            color: white;
            border-radius: 50%;
            padding: 3px 8px;
            font-size: 12px;
        }/* 全局样式文件 */
    </style>
</head>

<body>
<div id="app">
    <div class="notification-wrapper" @click="toggleMessages">
        <div class="icon">📧</div>
        <span id="notificationCounter" class="notification-badge" v-show="count > 0">{{ count > 99 ? '99+' : count }}</span>
    </div>


    <!-- 消息弹窗 -->
    <el-dialog
            title="消息列表"
            :visible.sync="showMessages"
            width="80%"
            :before-close="handleClose"
            >
        <!-- 一键已读和一键未读按钮 -->
        <div style="text-align: right; margin-bottom: 10px;">
            <el-button
                    type="success"
                    size="small"
                    @click="markAll(1)">
                一键已读
            </el-button>
            <el-button
                    type="warning"
                    size="small"
                    @click="markAll(0)">
                一键未读
            </el-button>
        </div>

        <el-table
                ref="multipleTable"
                :data="messageData"
                tooltip-effect="dark"
                style="width: 100%">
            <el-table-column
                    align="center"
                    prop="messageId"
                    label="消息编号">
                <template #default="{ $index }">
                    <div style="text-align: center;">
                        {{ $index + 1 }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="message"
                    label="消息">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="user"
                    label="用户名">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="time"
                    label="接收时间">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="status"
                    label="状态">
            </el-table-column>
            <el-table-column
                    label="操作">
                <template #default="{ row }">
                    <div style="text-align: center">
                        <!-- 删除按钮 -->
                        <el-button
                                type="danger"
                                size="small"
                                @click="confirmDelete(row.messageId)">
                            删除
                        </el-button>
                        <!-- 标记未读按钮 -->
                        <el-button
                                type="warning"
                                size="small"
                                v-if="row.status === '已读'"
                                @click="UpdateStatus(row.messageId)">
                            标记未读
                        </el-button>
                        <!-- 标记已读按钮 -->
                        <el-button
                                type="success"
                                size="small"
                                v-if="row.status === '未读'"
                                @click="UpdateStatus(row.messageId)">
                            标记已读
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
        <el-button @click="reset()">关闭</el-button>
    </span>
    </el-dialog>
</div>

<script src="js/vue.js"></script>
<script src="js/element-ui/lib/index.js"></script>
<script src="js/axios-0.18.0.js"></script>
<link rel="stylesheet" href="js/element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                count: 0,
                messageData: [],
                showMessages: false,
                notificationInterval: null
            };
        },
        methods: {
            toggleMessages() {
                this.showMessages = !this.showMessages;
                if (this.showMessages) {
                    this.selectMessage();
                }
            },
            reset() {
                this.showMessages = false;
                this.MessageCount();
            },
            confirmDelete(messageId) {
                this.$confirm('此操作将永久删除该消息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.handleDelete(messageId);
                }).catch(() => {
                    this.$message.info('已取消删除');
                });
            },
            handleDelete(messageId){
                axios({
                    method:'delete',
                    url:'/Order',
                    params:{messageId:messageId}
                }).then(resp=>{
                    this.selectMessage()
                    console.log(resp.data)
                })
            },
            UpdateStatus(messageId) {
                axios({
                    method: 'put',
                    url: '/Order/updateStatue',
                    params: { messageId: messageId }
                }).then(resp => {
                    this.selectMessage();
                    const message = this.messageData.find(m => m.messageId === messageId);
                    if (message) {
                        message.status = message.status === '已读' ? '未读' : '已读';
                    }
                }).catch(error => {
                    this.$message.error('消息状态更新请求出错');
                    console.error(error);
                });
            },
            selectMessage() {
                axios({
                    method: 'post',
                    url: `/Order/selectMessage`
                }).then(resp => {
                    if (Array.isArray(resp.data)) {
                        this.messageData = resp.data;
                    } else {
                        this.$message.error('消息查询失败，返回数据格式不正确');
                        console.error('返回数据格式不正确', resp.data);
                    }
                }).catch(error => {
                    this.$message.error('消息查询失败！');
                    console.error(error);
                });
            },
            MessageCount() {
                axios({
                    method: 'post',
                    url: `/Order/unread`
                }).then(resp => {
                    this.count = resp.data;
                }).catch(error => {
                    this.$message.error('未读消息数量查询失败');
                    console.log(error);
                });
            },
            handleClose(done) {
                this.showMessages = false;
                done();
            },

            //一键操作
            markAll(param) {
                axios({
                    method: 'put',
                    url: '/Order/markAll',
                    params:{param:param}
                }).then(resp => {
                    console.log(resp.data)
                    this.selectMessage();
                }).catch(error => {
                    this.$message.error('标记所有为已读失败');
                    console.error(error);
                });
            },
        },
        mounted() {
            this.MessageCount();
            this.notificationInterval = setInterval(() => {
                this.MessageCount();
            }, 10000);
        },
        beforeDestroy() {
            clearInterval(this.notificationInterval);
        }
    });
</script>
</body>

</html>